
<template>
  <div>
    <el-collapse v-model="activeNames" @change="handleChange" accordion>
      <el-collapse-item title="事故发生的可能性（L）判定准则" name="1">
        <LSKNXIndexL ref="mychild1"></LSKNXIndexL>
      </el-collapse-item>
      <el-collapse-item title="事件后果严重性（S）判定准则" name="2">
        <LSYZXIndexS ref="mychild2"></LSYZXIndexS>
      </el-collapse-item>
      <el-collapse-item title="安全风险等级判定准则（R）控制措施" name="3">
         <LSKZCSIndex ref="mychild3"></LSKZCSIndex>
      </el-collapse-item>
      <el-collapse-item title="风险级别设置" name="4">
         <LSJBSZIndex ref="mychild4"></LSJBSZIndex>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import LSKNXIndexL from '../AllTable/LSKNXIndexL'
import LSYZXIndexS from '../AllTable/LSYZXIndexS'
import LSKZCSIndex from '../AllTable/LSKZCSIndex'
import LSJBSZIndex from '../AllTable/LSJBSZIndex'
import 'qrcodejs2/jquery.min.js'
  export default {
    components: {LSKNXIndexL,LSYZXIndexS,LSKZCSIndex,LSJBSZIndex},
    data() {
      return {
        activeNames: '',
        itemMaxHeight: 100,
      };
    },
    methods: {
      handleChange(val) {
        if(val == 1){
          this.$refs.mychild1.initData();
        }else if(val == 2){
          this.$refs.mychild2.initData();
        }else if(val == 3){
          this.$refs.mychild3.initData();
        }else if(val == 4){
          this.$refs.mychild4.initData();
        }
      },
      computedItemHeight(){
        return window.innerHeight - Array.from(document.querySelectorAll('.el-collapse-item'))
          .reduce((s,el)=>{
            return s+el.children[0].offsetHeight
          }, 0)
      },
    },
    mounted(){
      setTimeout(() => {
        this.itemMaxHeight = this.computedItemHeight();
        Array.from(document.querySelectorAll('.el-collapse-item__wrap'))
        .forEach((el)=>{
          el.style.maxHeight = (this.itemMaxHeight-193) + 'px'
        })
        $(document).find('.el-collapse-item__content').height((this.itemMaxHeight-193) + 'px');
      }, 1000);
      this.itemMaxHeight = this.computedItemHeight();
		},
  }
</script>